<template>
  <div class="cinema_box">
    <div class="title_fiex">
    <Title/>
      <van-dropdown-menu>
        <van-dropdown-item :title="msg" :options="option1" class="region" ref="time">
          <div @click="Whole('Whole')" :class="{activeClass:active=='Whole'}">全城</div>
          <div
            v-for="(t, index) in RegionList" :key="index" @click="onConfirm([index,t.districtId,t.districtName])" :class="{ activeClass: active == index }">
            {{ t.districtName }}
          </div>
        </van-dropdown-item>
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
      </van-dropdown-menu>
    </div>
    <ul v-if="show">
      <li v-for="(time , index) in CinemaList" :key="index" @click="CinemaClick(time.cinemaId)">
        <div class="cinema">
          <div class="left">
            <p class="left_txt">{{time.name}}</p>
            <p class="left_address">{{time.address}}</p>
          </div>
          <div class="right">
            <span class="right_txt">￥{{time.lowPrice/100}}</span>
            <span>起</span>
            <p class="right_address">距离未知</p>
          </div>
        </div>
      </li>
    </ul>
      <ul v-show="!show">
      <li v-for="(time , index) in RenderList" :key="index">
        <div class="cinema">
          <div class="left">
            <p class="left_txt">{{time.name}}</p>
            <p class="left_address">{{time.address}}</p>
          </div>
          <div class="right">
            <span class="right_txt">￥{{time.lowPrice/100}}</span>
            <span>起</span>
            <p class="right_address">距离未知</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Title from "@/components/Title";
// import { CinemaDataAPI } from '@/api/index.js'
import { reactive, ref, toRefs } from "@vue/reactivity";
import { computed, onMounted, watch } from "@vue/runtime-core";
import { Toast } from 'vant';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
  name: "Cinema",
  components: {
    Title,
  },
  setup(props) {
    const state = reactive({
      active: -1,
      msg:'全城',
      num:0,
      value1: 0,
      value2: "a",
      value3: "c",
      option1: [
        {
          text: "全城",
          value: 0,
        }
      ],
      option2: [
        { text: "APP订票", value: "a" },
        { text: "前台兑换", value: "b" },
      ],
      option3: [
        { text: "最近去过", value: "c" },
        { text: "离我最近", value: "d" },
      ],
      CinemaList:[],
      RegionList:[],
      RegionMovie:[],
      RenderList:[],
      show:true
    });

    // const CinemaData = async ()=>{
    //   const { data:res } = await CinemaDataAPI({id:store.state.city.cityId})
    //   if(res.msg=='ok'){
       
    //     state.CinemaList =res.data.cinemas
    //     Toast.clear()
    //     store.commit('DeliverySearch',state.CinemaList)
    //     RegionMovie(state.CinemaList)
    //   }
    // }
    const time = ref(null)
    const router = useRouter();
    const store = useStore();

    const RegionMovie = (arr)=>{
       const res = new Map();
       state.RegionList = arr.filter((arr) => !res.has(arr.districtName) && res.set(arr.districtName, 1));
    }
    
    
   
    const onConfirm = (val) => {
      state.msg=val[2]
      state.active = val[0];
      for(let i=0; i<state.CinemaList.length; i++){
        if (state.CinemaList[i].districtId == val[1]) {
           state.RegionMovie.push(state.CinemaList[i])
           state.RenderList = state.RegionMovie
        }  
      }
    };

    const Whole = (name)=>{
        state.active = name
        state.show=true
        time.value.toggle();
    }

   watch(()=>state.RenderList,()=>{
     state.RegionMovie=[]
     
      time.value.toggle();
      state.show=false
   })
 
    onMounted(() => {
      store.dispatch('GET_SOCKET_INFO')
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,  
      });     
    });

    // 仓库拿数据
    const CinemaList = computed(()=>{
      RegionMovie(store.state.CinemaList)
       Toast.clear()
      return state.CinemaList = store.state.CinemaList
    })

    const CinemaClick = (cinemaId)=> {
         router.push({
           name:'cinema',
           params:{
             cinemaId:cinemaId,
           }
         })
    }
    //获取仓库参数
   
    return {
      ...toRefs(state),
      onConfirm,
      Whole,
      time,
      CinemaList,
      CinemaClick,
    };
  },
};
</script>

<style lang='less' scoped>
.activeClass {
  border: 1px solid #ff5f16 !important;
  border-radius: 3px;
 
}
/deep/.van-dropdown-menu__title--active {
  color: #ff5f16;
}
/deep/.region {
  .van-popup {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 5px;
    div {
      width: 81.25px;
      height: 30px;
      margin: 8px 5px;
      border: 1px solid rgba(210, 214, 220, 0.5);
      text-align: center;
      line-height: 30px;
      color: #777;
      font-size: 12px;
    }
    .van-cell {
      display: none;
    }
  }
}
/deep/.van-dropdown-menu__bar {
  box-shadow: none;
  border-bottom: 1px solid #ededed88;
}
/deep/.van-overlay {
  background: rgba(124, 124, 124, 0.633)
}

.cinema{
  padding: 15px;
   display: flex;
   background: white;
   border-bottom: 1px solid #ededed;
   justify-content: space-between;
  & .left{
    width: calc(100% - 65px);
    & .left_txt{
    font-size: 15px;
  }
  & .left_address{
    margin-top: 5px;
    font-size: 12px;
    color: #797d82;
    max-width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  }

  & .right{
      text-align:center;
    & .right_txt{
      font-size: 15px;
      color: #ff5f16;
     
    }
    & span{
      font-size: 12px;
       color: #ff5f16;
    }
    & .right_address{
      font-size: 12px;
       color: #797d82;
       margin-top: 5px;
    }
  }
}
.title_fiex{
  width: 100%;
  position: fixed;
  top: 0;
}
.cinema_box{
  padding-top: 92px;
}
</style>